<template>
    <div class="box">
        <div class="emptybox" v-show="messagelist.length === 0">
            <img class="img" src="../../static/empty.png" alt="">
            <div class="text">暂无数据</div>
        </div>
        <div v-show="ele.businessType === 0 && ele.status === 1" v-for="(ele, i) in messagelist" :key="i">
            <div class="timebox">
                <div class="time">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD') }}</div>
            </div>
            <div class="tcboxitem">
                <div class="top">成单通知</div>
                <div class="msginfo">
                    <div class="cdmsg">你跟进的客户 <span class="bord">{{ ele.companyName }}</span> 开通了
                        <span class="bord">{{ productNameMap[ele.amtProduct] }}</span>服务；
                        <!-- <span v-show="ele.amtProduct === 1" class="bord">「电子签」</span>
                        <span v-show="ele.amtProduct === 2" class="bord">「日日保」</span>
                        <span v-show="ele.amtProduct === 3" class="bord">「长期保」</span>
                        <span v-show="ele.amtProduct === 4" class="bord">「微聘」</span>
                        <span v-show="ele.amtProduct === 5" class="bord">「微保」</span>
                        <span v-show="ele.amtProduct === 6" class="bord">「团意日保」</span>
                        <span v-show="ele.amtProduct === 7" class="bord">「短信群发」</span>  -->
                    </div>
                    <div class="lablebox">
                        <div class="lable">操作人：</div>
                        <div class="lablecontent">{{ ele.createUserName ? ele.createUserName : '--' }}</div>
                    </div>
                    <div class="lablebox">
                        <div class="lable">操作时间：</div>
                        <div class="lablecontent">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="ele.businessType === 0 && ele.status === 0" v-for="(ele, i) in messagelist" :key="i">
            <div class="timebox">
                <div class="time">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD') }}</div>
            </div>
            <div class="tcboxitem">
                <div class="top">关闭服务通知</div>
                <div class="msginfo">
                    <div class="cdmsg">你跟进的客户 <span class="bord">{{ ele.companyName }}</span> 关闭了
                        <span class="bord">{{ productNameMap[ele.amtProduct] }}</span>服务；
                        <!-- <span v-show="ele.amtProduct === 0" class="bord">「子弹发薪」</span>
                        <span v-show="ele.amtProduct === 1" class="bord">「电子签」</span>
                        <span v-show="ele.amtProduct === 2" class="bord">「日日保」</span>
                        <span v-show="ele.amtProduct === 3" class="bord">「长期保」</span>
                        <span v-show="ele.amtProduct === 4" class="bord">「微聘」</span>
                        <span v-show="ele.amtProduct === 5" class="bord">「微保」</span>
                        <span v-show="ele.amtProduct === 6" class="bord">「团意日保」</span>
                        <span v-show="ele.amtProduct === 7" class="bord">「短信群发」</span> 服务； -->
                    </div>
                    <div class="lablebox">
                        <div class="lable">操作人：</div>
                        <div class="lablecontent">{{ ele.createUserName ? ele.createUserName : '--' }}</div>
                    </div>
                    <div class="lablebox">
                        <div class="lable">操作时间：</div>
                        <div class="lablecontent">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="ele.businessType === 2" v-for="(ele, i) in messagelist" :key="i">
            <div class="timebox">
                <div class="time">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD') }}</div>
            </div>
            <div class="tcboxitem">
                <div class="top">续费通知</div>
                <div class="msginfo">
                    <div class="cdmsg">你跟进的客户 <span class="bord">{{ ele.companyName }}</span> 续费了
                        <span class="bord">{{ productNameMap[ele.amtProduct] }}</span>服务；
                    </div>
                    <div class="lablebox">
                        <div class="lable">操作人：</div>
                        <div class="lablecontent">{{ ele.createUserName ? ele.createUserName : '--' }}</div>
                    </div>
                    <div class="lablebox">
                        <div class="lable">操作时间：</div>
                        <div class="lablecontent">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="ele.businessType === 1" v-for="(ele, i) in messagelist" :key="i">
            <div class="timebox">
                <div class="time">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD') }}</div>
            </div>
            <div class="tcboxitem">
                <div class="top">客户付款通知</div>
                <div class="fkbox">
                    <div class="fkjetext">付款金额</div>
                    <div class="fkjenum">¥{{ ele.amount }}</div>
                </div>
                <div class="msginfo">
                    <div class="lablebox">
                        <div class="lable">付款客户：</div>
                        <div class="lablecontent">{{ ele.companyName }}</div>
                    </div>
                    <div class="lablebox">
                        <div class="lable">付款方式：</div>
                        <div class="lablecontent">{{ ele.msgContent }}</div>
                    </div>
                    <div class="lablebox">
                        <div class="lable">收款账户：</div>
                        <div class="lablecontent">{{ ele.bankName }}</div>
                    </div>
                    <div class="lablebox">
                        <div class="lable">收款汇总：</div>
                        <div class="lablecontent">今天收款{{ ele.totalCnt }}笔，共<span class="lightyellow">{{ ele.totalAmt
                        }}</span>元
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="ele.businessType === 3" v-for="(ele, i) in messagelist" :key="i">
            <div class="timebox">
                <div class="time">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD') }}</div>
            </div>
            <div class="tcboxitem">
                <div class="top">离职交接通知</div>
                <div class="msginfo">
                    <div class="cdmsg">已将 <span class="bord">韩翠花</span> 的所有数据交接给<span class="bord">肖战</span> ，生效时间为 <span
                            class="bord">2022年08月16日</span> ；</div>
                    <div class="lablebox">
                        <div class="lable">操作人：</div>
                        <div class="lablecontent">{{ ele.createUserName ? ele.createUserName : '--' }}</div>
                    </div>
                    <div class="lablebox">
                        <div class="lable">操作时间：</div>
                        <div class="lablecontent">{{ dayjs((ele.createTime).toString()).format('YYYY-MM-DD HH:mm:ss') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';
import { getmessagelistapi } from '../../api/personalmsgapi'
onMounted(() => {
    console.log(1111111)
    getmessagelist()
})

// v-show="ele.amtProduct === 0" class="bord">「子弹发薪」</span>
//                         <span v-show="ele.amtProduct === 1" class="bord"></span>
//                         <span v-show="ele.amtProduct === 2" class="bord">「日日保」</span>
//                         <span v-show="ele.amtProduct === 3" class="bord"></span>
//                         <span v-show="ele.amtProduct === 4" class="bord"></span>
//                         <span v-show="ele.amtProduct === 5" class="bord"></span>
//                         <span v-show="ele.amtProduct === 6" class="bord"></span>
//                         <span v-show="ele.amtProduct === 7" class="bord">

const productNameMap = ref({
    1: '「电子签」',
    2: '「日日保」',
    3: '「长期保」',
    4: '「微聘」',
    5: '「微保」',
    6: '「团意日保」',
    7: '「短信群发」',
})

const getmessagelist = () => {
    getmessagelistapi({
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }).then((res: any) => {
        console.log(res, '消息列表')
        let arr = res.list
        messagelist.value = messagelist.value.concat(arr)
        hasNextPage.value = res.hasNextPage
    })
}
const messagelist = ref<any>([])
const pageNum = ref(1)
const pageSize = ref(10)
const hasNextPage = ref(true)
onReachBottom(() => {
    if (!hasNextPage.value) {
        uni.showToast({
            title: "暂无更多数据",
            icon: "none"
        })
    } else {
        pageNum.value += 1
        getmessagelist()
    }
})
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fafafc;
}

.tcboxitem {
    width: 100%;
    box-sizing: border-box;
    border: 2rpx solid #F4F4F7;
    border-radius: 16rpx;
    margin-bottom: 32rpx;
    background-color: #ffffff;

    .fkbox {
        margin-top: 32rpx;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .fkjetext {
            color: #9497B1;
            font-size: 28rpx;
        }

        .fkjenum {
            // color: #FF7642;
            color: #202536;
            font-size: 52rpx;
            font-weight: 700;
        }
    }

    .msginfo {
        padding: 32rpx;
        box-sizing: border-box;
        width: 100%;

        .lablebox {
            font-size: 28rpx;
            display: flex;
            align-items: center;
            margin-bottom: 32rpx;

            .lable {
                color: #9497B1;
                width: 160rpx;
            }

            .lablecontent {
                color: #202536;
            }
        }

        .cdmsg {
            font-size: 28rpx;
            color: #565868;
            margin-bottom: 32rpx;

            .bord {
                font-weight: 700;
                color: #3E5FF5;
            }
        }
    }

    .top {
        font-size: 36rpx;
        font-weight: 700;
        color: #202536;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding-left: 36rpx;
        height: 84rpx;
        border-top-right-radius: 16rpx;
        border-top-left-radius: 16rpx;
    }
}

.timebox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;

    .time {
        width: 190rpx;
        color: #FFFFFF;
        text-align: center;
        height: 34rpx;
        line-height: 34rpx;
        background-color: #202536;
        opacity: 0.2;
        font-size: 24rpx;
        border-radius: 23rpx;
    }
}

.emptybox {
    height: 90vh;
    width: 100%;
    box-sizing: border-box;

    .text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        color: #9497B1;
    }

    .img {
        width: 100%;
        height: 260rpx;
    }
}
</style>